<html>
<head>
<script language="Javascript" src="../gamelib/gamelib_core.js"></script>
<script language="Javascript" src="../gamelib/gamelib_sprites.js"></script>
<script language="Javascript">

var cdir=0;

Gl_preloader("../images/penguin.gif");

function init(){
	Sp_linuxcompatible=true;
	penguin=new Sp_Sprite();	// make the sprite, called "penguin"
	penguin.setImage("../images/penguin.gif",64,64,11,2); //give it a canvas image, size it 64,64.
							   //the canvas has 11 frames, each with 2
							   // stages of animation.
	penguin.setXlimits(50,300);	// set x limits for penguin.
	penguin.setYlimits(250,500);	// set y limits for penguin.
	penguin.moveTo(120,320);	// move it onto screen.
	penguin.setFrame(1);		// set it to frame 1 initially (walking right)
	penguin.setAnimationLoop(0,20);	// limit animation to 2 animations (0 to 1) for each frame.
					// not really necessary here, since there are only 2 animations for
					// each frame anyway!
	penguin.setAnimationSpeed(3,"reverse"); // animates every 3rd loop of the animation timer, forward
						// through animation stages.
	penguin.setAnimation(1);	// set its initial animation stage to 1. No reason really,
					// just demonstrating the method...
	penguin.setSpeed(4);		// give it a speed of 4

	penguin.setAnimationRepeat(-1);	// Keep animating forever. Any other value above 0 means
					// animate this many times. (-1 is actually the default,
					// so it didn't need setting in this case.

	penguin.switchOn();		// switch it on!
	Gl_hook("animate_penguin()");	// hook our function to change directions into the gamelib
					// central timer.
	Gl_scrollbars("no");	// turn off scroll-bars (with IE)
	Gl_start();			// start everything moving!
}

function animate_penguin(){
	if(penguin.xdir==0&&penguin.ydir==0){	// if the sprite has stopped, it must have hit one
						// of its x or y limits. Change direction and frame
						// to make it walk in a square...
		if(cdir++==3) cdir=0;
		if(cdir==1){
			penguin.setFrame(2);	// walking up
			penguin.setDir(0,-1)
		}else if(cdir==2){
			penguin.setFrame(0);	// walking left
			penguin.setDir(-1,0)
		}else if(cdir==3){
			penguin.setFrame(3);	// walking down
			penguin.setDir(0,1)
		}else if(cdir==0){
			penguin.setFrame(1);	// walking right
			penguin.setDir(1,0)
		}
	}
}
</script>
</head>
<body bgcolor="#000000" onload="if(!Gl_browser.panic)init()" style="overflow:hidden">
<font color="#ffbb00" face="Arial" size=3>
<u>Sprite library example 2</u><br><br>
<font size=2>
Animation.<br><br>
This sprite is using a "canvas animation" image.<br>
The actual image is shown below this line:<br><br>
<img src="../images/penguin.gif" width=176 height=32><br><br>
All the stages of animation are in the same image,<br>
which makes for faster download and smoother animation<br>
(especially for Netscape 4).
</font>
</font>
</body>
</html>